<!--category模块：二级分类基础布局 -->
<template>
    <div class="sub-categroy">
        <div class="container">
            <!-- 面包屑 -->
            <SubBread></SubBread>
            <!-- 分类筛选区 -->
            <SubFilter @filter-change="changeFilter"></SubFilter>
            <!-- 搜索结果区 -->
            <div class="goods-list">
                <!-- 最高人气...排序 -->
                <SubSort @sort-change="changeSort"></SubSort>
                <!-- 产品列表 -->
                <ul>
                    <li v-for="item in goodsList" :key="item.id">
                        <GoodsItem :goods="item" />
                    </li>
                </ul>
                <!-- 加载效果组件 -->
                <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData"></XtxInfiniteLoading>
            </div>

        </div>
    </div>
</template>
<script>
import { findSubCategoryGoods } from '@/api/category'
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

// 获取数据函数
const useGetData = (loading, finished, goodsList, route, reqParams) => {
    const getData = () => {
        loading.value = true
        reqParams.categoryId = route.params.id

        findSubCategoryGoods(reqParams).then(({ result }) => {

            if (result.items.length) {
                goodsList.value.push(...result.items)
                reqParams.page++
            } else {
                // 加载完毕
                finished.value = true
            }
            // 请求结束
            loading.value = false
        })
    }
    return { getData }
}

// 切换二级分类重新加载
const useWatch = (route, goodsList, finished, reqParams) => {
    watch(() => route.params.id, (newVal) => {
        if (newVal && route.path === ('/category/sub/' + newVal)) {
            goodsList.value = []
            reqParams = {
                page: 1,
                pageSize: 20
            }
            finished.value = false
        }
        // console.log('切换二级分类重新加载')
    })
}
// 监听筛选区改变
const useChangeFilter = (reqParams, goodsList, finished) => {
    const changeFilter = (filterParams) => {
        reqParams = { ...reqParams, ...filterParams }
        reqParams.page = 1
        goodsList.value = []
        finished.value = false
    }
    return { changeFilter }
}
// 监听排序改变
const useChangeSort = (reqParams, goodsList, finished) => {
    const changeSort = (sortParams) => {
        reqParams = { ...reqParams, ...sortParams }
        reqParams.page = 1
        goodsList.value = []
        finished.value = false
    }
    return { changeSort }
}
export default {
    name: 'SubCategory',
    components: {
        SubBread,
        SubFilter,
        SubSort,
        GoodsItem
    },
    setup() {
        const route = useRoute()
        const loading = ref(false)
        const finished = ref(false)
        const goodsList = ref([])
        // 查询参数
        let reqParams = {
            page: 1,
            pageSize: 20
        }
        // 获取数据函数
        const { getData } = useGetData(loading, finished, goodsList, route, reqParams)
        // 切换二级分类重新加载
        useWatch(route, goodsList, finished, reqParams)
        // 监听筛选区改变
        const { changeFilter } = useChangeFilter(reqParams, goodsList, finished)
        // 监听排序改变
        const { changeSort } = useChangeSort(reqParams, goodsList, finished)

        return { loading, finished, goodsList, getData, changeFilter, changeSort }
    }
}
</script>
<style lang="less" scoped>
.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;

        li {
            margin-right: 20px;
            margin-bottom: 20px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }
}
</style>